<template>
  <el-card>
    <div class="box">
      <img src="#aaa" alt="" class="avatar">
      <div class="bottom">
        <h3 class="title">{{ getTime() }}好呀!</h3>
        <p class="subtitle">欢迎您</p>
      </div>
    </div>
    <div class="download">
      <el-popconfirm width="220" confirm-button-text="OK" cancel-button-text="No, Thanks" icon="InfoFilled"
        icon-color="#626AEF" title="模板会保存到桌面上，原模板会被覆盖，请确认是否继续？" @confirm="download">
        <template #reference>
          <!-- <el-button type="primary">下载模板</el-button> -->
          <button class="download-button" type="button">
            <span class="button__text">下载模板</span>
            <span class="button__icon"><svg  viewBox="0 0 35 35"
                id="bdd05811-e15d-428c-bb53-8661459f9307" data-name="Layer 2" class="svg">
                <path
                  d="M17.5,22.131a1.249,1.249,0,0,1-1.25-1.25V2.187a1.25,1.25,0,0,1,2.5,0V20.881A1.25,1.25,0,0,1,17.5,22.131Z">
                </path>
                <path
                  d="M17.5,22.693a3.189,3.189,0,0,1-2.262-.936L8.487,15.006a1.249,1.249,0,0,1,1.767-1.767l6.751,6.751a.7.7,0,0,0,.99,0l6.751-6.751a1.25,1.25,0,0,1,1.768,1.767l-6.752,6.751A3.191,3.191,0,0,1,17.5,22.693Z">
                </path>
                <path
                  d="M31.436,34.063H3.564A3.318,3.318,0,0,1,.25,30.749V22.011a1.25,1.25,0,0,1,2.5,0v8.738a.815.815,0,0,0,.814.814H31.436a.815.815,0,0,0,.814-.814V22.011a1.25,1.25,0,1,1,2.5,0v8.738A3.318,3.318,0,0,1,31.436,34.063Z">
                </path>
              </svg></span>
          </button>
        </template>
      </el-popconfirm>
    </div>
  </el-card>
  <div class="bottoms">
    <svg-icon name="welcome" width="600px" height="300px"></svg-icon>
  </div>
</template>

<script setup lang="ts">
import { getTime } from '@/utils/time';
import { downloadTemplate } from '@/axios/api/download'
import { ElNotification } from 'element-plus';

async function download() {
  try {
    let res: any = await downloadTemplate();
    if (res.code === 200) {
      ElNotification({
        title: 'Success',
        message: '下载成功,文件保存在桌面上',
        type: 'success',
      });
    } else {
      ElNotification({
        title: 'Error',
        message: res.message,
        type: 'error',
      })
    }
  } catch (error: any) {
    ElNotification({
      title: 'Error',
      message: error,
      type: 'error',
    })
  }
}


</script>

<style scoped lang="scss">
.box {
  display: flex;

  .avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }

  .bottom {
    margin-left: 20px;

    .title {
      font-size: 30px;
      font-weight: 900;
      margin-bottom: 30px;
    }

    .subtitle {
      font-style: italic;
      color: skyblue;
    }
  }
}

.bottoms {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

.download {
  margin-left: 30%;
}



.download-button {
  position: relative;
  width: 150px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  // border: 1px solid #17795E;
  background-image: linear-gradient(to right, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
  overflow: hidden;
}

.download-button, .button__icon, .button__text {
  transition: all 0.3s;
}

.download-button .button__text {
  transform: translateX(22px);
  color: #fff;
  font-weight: 600;
}

.download-button .button__icon {
  position: absolute;
  transform: translateX(109px);
  height: 100%;
  width: 39px;
  background-image: linear-gradient(to right bottom, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.buttdownload-buttonon .svg {
  width: 20px;
  fill: #fff;
}

.download-button:hover {
  background-image: linear-gradient(to right bottom, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
}

.download-button:hover .button__text {
  color: transparent;
}

.download-button:hover .button__icon {
  width: 148px;
  transform: translateX(0);
}

.download-button:active .button__icon {
  background-image: linear-gradient(to right bottom, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
}

.download-button:active {
  background-image: linear-gradient(to right bottom, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
}
</style>